<template>
    <div class="">
        <div class="prod-item-box" :class="props.itemClass">
            <h3>{{props.titleName}}</h3>
            <div class="echarts-box">
                <slot name="WeeksReport"></slot>
            </div>
        </div>
    </div>
</template>
<script setup>
const props = defineProps({
    titleName: {
        type: String,
        default: ""
    },
    itemClass:{
        type:String,
        default:""
    }
})
</script>
<style lang="scss" scoped>
.prod-item-box {
    h3 {
        height: 3rem;
        line-height: 3rem;
        background: url("@/assets/image/icon9.png") 0 center no-repeat;
        padding-left: 2rem;
        background-size: auto 100%;
        font-size: 1.6rem;
        font-weight: 400;
        color: #fff;
        position: relative;
    }

    h3:after {
        position: absolute;
        content: "";
        display: block;
        width: .4rem;
        height: .4rem;
        border-radius: 50%;
        background: #A0EEFD;
        box-shadow: 0px 0px 6px 1px #7AC2D9;
        top: 50%;
        right: 2rem;
        margin-top: -.2rem;
    }
}

.prod-item-box-50 {
    h3 {
        background: url("@/assets/image/icon10.png") 0 center no-repeat;
        background-size: auto 100%;
    }
}
</style>
  